<template>
  <div class="nav_page">
    <div class="top_border">
      <div class="cont">
        <div style="line-height:36px;float:right;margin-right: 20px;">
          <span>
            <img src="../../static/icon/icon11.png" alt="">
            <a href="/" style="margin-left:3px">中文</a>
          </span> &nbsp;&nbsp;|&nbsp;&nbsp;
          <span>
            <img src="../../static/icon/icon12.png" alt="">
            <a href="/" style="margin-left:3px">English</a>
          </span>
        </div>
      </div>

    </div>
    <nav role="navigation" class="navbar ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="button-xs navbar-toggle" style="border: 1px solid rgb(102, 102, 102);">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="/" class="navbar-brand hidden-xs"><img src="../../static/icon/logo.jpg" alt="" style="height:40px"></a>
          <a href="/" class="navbar-brand visible-xs">众志成</a>
        </div>
        <div id="navMain" class="collapse-must-close navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li :class="item.active" v-for="item in nav_bar" @click="nav_func(item)">
              <a href="void:javascript(0)" :class="{ nav_active: item.active }">{{item.name}}</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nav_bar: [
        {
          name: "公司介绍",
          active: true,
          urls: "/"
        },
        {
          name: "服务项目",
          active: false,
          urls: "/service"
        },
        {
          name: "行业应用",
          active: false,
          urls: "/industry"
        },
        {
          name: "案例展示",
          active: false,
          urls: "/anli"
        },
        {
          name: "功能方案",
          active: false,
          urls: "/plan"
        },
        {
          name: "提交需求",
          active: false,
          urls: "/subDemand"
        }
      ]
    }
  },
  methods: {
    nav_func(item) {
      var _this = this
      _this.nav_bar.forEach(v => {
        v.active = false
      })
      item.active = true
      _this.$router.push(item.urls)
    }
  }
}
</script>
<style scoped>
.top_border {
  height: 36px;
  width: 100%;
  background: #f0f0f0;
}
.navbar-inverse {
  background-color: #fff !important;
  border-color: #fff !important;
}
#navMain {
  float: right;
}
.navbar-nav {
  color: #333;
  padding-top: 10px;
}
.navbar-nav a {
  color: #333;
}
.nav_active {
  color: #58aaef !important;
}
</style>
